<template>
  <div class="songListTitle">
    <div class="back" @click="back"><i class="el-icon-back"></i></div>
    <div class="imgBox">
      <el-image :src="this.albumData.albumData.album.blurPicUrl" lazy></el-image>
    </div>

    <div class="songListItem">
      <div class="head">
        <el-tag type="danger" size="medium">专辑</el-tag>
        <div class="title">{{ albumData.albumData.album.name }}</div>
      </div>

      <div>
        <el-button type="danger" round size="medium" @click="playAll()"><i class="el-icon-video-play"></i> 播放全部
        </el-button>
        <el-button round size="medium" @click="subscribe()"><i class="el-icon-folder-add"></i> {{ subTest }}({{
            count
        }})</el-button>
        <el-button round size="medium" @click="share()"><i class="el-icon-share"></i>分享({{ shareCount }})</el-button>
      </div>
      <div class="titleArt">
        <div>歌手:</div>
        <div v-for="(item, i) in albumData.albumData.album.artists" :key="i">
          <div @click="getArt(item.id)" class="art">{{ item.name }}</div>
        </div>
      </div>
      <div>时间:{{ albumData.albumData.album.publishTime | dateFormat2 }}</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['albumData']), // 读取VUEX中的状态
  },
  mounted() {
    this.id = window.sessionStorage.getItem('album');
    if (localStorage.getItem('cookie') !== null) {
      this.ifSub();
    }
  },
  data() {
    return {
      subTest: '收藏',
      count: 0,
      shareCount: 0,
      id: null,
    };
  },

  methods: {
    ...mapActions(['savePreSong', 'clickPlay']),
    getArt(e) {
      window.sessionStorage.setItem('artists', e);
      this.$router.push(`/artistsPage?id=${e}`);
    },
    // 播放全部
    async playAll() {
      await this.savePreSong({ preSong: 0 });
      await this.clickPlay({ ifPlay: false });
    },
    // 歌单的收藏
    subscribe() {
      if (localStorage.getItem('cookie') !== null) {
        if (this.subTest === '收藏') {
          this.subTest = '取消收藏';
          this.getSub(1);
        } else {
          this.subTest = '收藏';
          this.getSub(2);
        }
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 收藏的请求
    // t类型1是收藏  2是取消收藏
    async getSub(e) {
      const cookie = localStorage.getItem('cookie');
      this.$api.subAlb({ t: e, id: this.id, cookie, timestamp: this.$utils.timestamp() }).then((ret) => {
        if (ret.code === 200) {
          this.$message({
            message: '操作成功,请等待三分钟后重新查看',
            type: 'success',
          });
          if (e === 1) {
            this.count += 1;
          } else {
            this.count -= 1;
          }
        } else if (ret.code !== 200) {
          this.$message.error('操作失败');
        }
      });
    },

    // 为了判断是否已收藏
    async ifSub() {
      this.$api
        .subAlbList({
          id: this.id,
          cookie: localStorage.getItem('cookie'),
          timestamp: this.$utils.timestamp(),
        })
        .then((ret) => {
          this.count = ret.subCount;
          this.shareCount = ret.shareCount;
          if (ret.isSub === true) {
            this.subTest = '取消收藏';
          } else {
            this.subTest = '收藏';
          }
        });
    },

    // 分享的按钮
    share() {
      this.$message.error('此功能未开发');
    },

    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.songListTitle {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.imgBox {
  width: 200px;
  max-width: 200px;
  margin-right: 20px;
  margin-left: 30px;
}

.back {
  position: absolute;
  font-size: 30px;
  left: 0;
  top: 0;
}

.el-image {
  width: 200px;
  border-radius: 10%;
}

.head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.head .el-tag {
  margin-right: 10px;
}

.title {
  font-size: 24px;
  font-weight: 700;
}

.titleArt {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}

.art {
  cursor: pointer;
  margin-right: 10px;
}
</style>
